<template>
  <div class="scanner-container">
    <!-- 扫描区域 -->
    <div ref="qrReader" id="qr-reader" class="qr-reader"></div>
    
    <!-- 显示扫描结果 -->
    <!-- 可选: 如果需要显示扫描结果，可以在这里添加 -->
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { Html5Qrcode } from 'html5-qrcode'

const qrScanner = ref(null)
const qrReader = ref(null)

onMounted(async () => {
  await initScanner()
})

async function initScanner() {
  const config = { fps: 10, qrbox: 250 }
  
  try {
    // 创建 Html5Qrcode 实例
    qrScanner.value = new Html5Qrcode("qr-reader")
    
    // 检查摄像头权限
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    stream.getTracks().forEach(track => track.stop());
    
    // 开始扫描
    qrScanner.value.start(
      { facingMode: "environment" }, // 使用后置摄像头
      config,
      (decodedText) => {
        console.log("✅ 扫描结果：", decodedText)
        uni.showToast({
          title: "识别成功",
          icon: "none"
        })
        qrScanner.value.stop()
		
		uni.navigateTo({
			url:`/pages/power_bank_add/power_bank_add?data=${decodedText}`
		})
      },
      (err) => {
        console.error("⚠️ 扫描出错：", err)
      }
    )
  } catch (err) {
    console.error("💥 启动失败：", err)
    uni.showToast({
      title: "启动失败：" + err.message,
      icon: "none"
    })
  }
}
</script>

<style scoped lang="scss">
.scanner-container {
  position: fixed; /* 固定定位，使容器相对于浏览器窗口 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw; /* 视口宽度 */
  height: 100vh; /* 视口高度 */
  background-color: black; /* 背景颜色，可以根据需求调整 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-reader {
  width: 100%;
  object-fit: cover; /* 确保视频内容按比例缩放填充整个容器 */
  
  // video {
  // 	height: 100vh !important;
  // }
}

</style>